<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head th:include="common/common :: bootcss">
    <title>收费设置</title>
    <script>

        function showSetting(id, type, start, end) {
            $("#preferentialType").val(type);
            $("#settingForm input[name=startTime]").val(start);
            $("#settingForm input[name=endTime]").val(end);
            $("#settingForm input[name=id]").val(id);
        }

        function delSetting(id) {
            $.post("/admin/feeSetting/del", {
                id : id
            }, function(data) {
                if (!data.success) {
                    console.log(data.errorMsg);
                } else {
                    query(0);
                }
            });
        }


        var page = {
            pageNum : 1,
            pageSize : 10,
            pages : 0,
            total : 0
        };



        function query(increment) {
            if (increment < 0 && page.pageNum == 1) {
                return;
            }
            if (increment > 0 && page.pageNum >= page.pages) {
                return;
            }

            page.pageNum += increment;

            $.post("/admin/feeSetting/list", {
                pageNum : page.pageNum,
                pageSize : page.pageSize
            }, function(data) {
                if (!data.success) {
                    console.log(data.errorMsg);
                } else {
                    var html = "";
                    page.pages = data.pages;
                    page.total = data.total;
                    data.data.forEach(function (e) {
                        html += "<tr>";
                        html += "<td>" +  e.id + "</td>";
                        html += "<td>" +  (e.preferentialType == 1 ? "节日免费" : "充值活动") + "</td>";
                        html += "<td>" +  e.startTime  + "</td>";
                        html += "<td>" +  e.endTime + "</td>";
                        html += "<td><button type='button' class='btn btn-xs' onclick='showSetting(" + e.id + "," + e.preferentialType + ",\"" + e.startTime + "\",\"" + e.endTime + "\")' data-toggle='modal' data-target='#addModal'>修改</button>" +
                            " <button type='button' class='btn btn-xs' onclick='delSetting(" + e.id + ")'>删除</button></td>";
                        html += "</tr>";
                    })
                    $("#mainTable > tbody").html(html);

                    if (page.pageNum == 1) {
                        $("#liPrePage").addClass("disabled");
                    } else {
                        $("#liPrePage").removeClass("disabled")
                    }
                    if (page.pages > 1 && page.pageNum < page.pages) {
                        $("#liNextPage").removeClass("disabled");
                    } else {
                        $("#liNextPage").addClass("disabled");
                    }
                }
            });
        }

        $(document).ready(function () {

            $('.form_date').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });



            $("#btNextPage").click(function () {
                query(1);
            });
            $("#btPrePage").click(function () {
                query(-1);
            });

            query(0)

            $("#btSave").click(function () {
                $.post("/admin/feeSetting/saveOrUpdate", {
                    "preferentialType": $("#preferentialType").val(),
                    "startTime" : $("#settingForm input[name=startTime]").val(),
                    "endTime" : $("#settingForm input[name=endTime]").val(),
                    "id" : $("#settingForm input[name=id]").val()
                }, function (data) {
                    if (!data.success) {
                        console.log(data.errorMsg);
                    } else {
                        query(0);
                        $('#addModal').modal('hide');
                    }
                });
            });

            $("#btAdd").click(function () {
                $("#settingForm input[name=startTime]").val("");
                $("#settingForm input[name=endTime]").val("");
                $("#settingForm input[name=id]").val("");
            });

        });

    </script>
</head>
<body>
<ol class="breadcrumb">
    <li><a th:href="@{/admin/feeSetting/}">收费设置</a></li>
</ol>
<button type="button" class="btn btn-default" id="btAdd" style="margin-bottom: 10px" data-toggle='modal' data-target='#addModal'>添加</button>
<table id="mainTable" class="table">
    <thead>
    <tr>
        <th>ID</th>
        <th>优惠种类</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<ul class="pager">
    <li class="disabled" id="liPrePage"><a id="btPrePage" href="javascript:void(0);"><</a></li>
    <li id="liNextPage"><a id="btNextPage" href="javascript:void(0);" >></a></li>
</ul>

<div class="modal fade" tabindex="-1" role="dialog" id="addModal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加</h4>
            </div>
            <div class="modal-body">
                <form id="settingForm" class="form-inline" style="padding-bottom: 10px">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label>起止时间</label>
                        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" readonly name="startTime">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                        <div class="input-group date form_date" data-link-format="yyyy-mm-dd">
                            <input class="form-control" size="16" type="text" readonly name="endTime">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="preferentialType">优惠种类</label>
                        <select id="preferentialType" class="form-control">
                            <option value="1">节日免费</option>
                            <option value="2">充值活动</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btSave">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>